import React from 'react'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger
} from '@/components/ui/tooltip'

type StatCardColor = 'blue' | 'green' | 'red' | 'orange' | 'sky' | 'gray'

interface StatCardProps {
  color: StatCardColor
  title1: string
  title2?: string
  value: React.ReactNode
  tooltip: React.ReactNode
  id?: string
  asLink?: boolean
  className?: string
}

const colorMap: Record<StatCardColor, string> = {
  blue: 'bg-blue-100/80',
  green: 'bg-green-200/80',
  red: 'bg-red-200/80',
  orange: 'bg-orange-100/80',
  sky: 'bg-sky-100/80',
  gray: 'bg-gray-100/80'
}

export default function StatCard({
  color,
  title1,
  title2,
  value,
  tooltip,
  id,
  asLink,
  className = ''
}: StatCardProps) {
  const bgColor = colorMap[color] || colorMap.blue
  const content = (
    <div
      className={`flex min-h-[56px] flex-col items-center justify-center rounded-md ${bgColor} p-0.5 shadow-lg ${className}`}
    >
      <div className="flex w-full flex-col gap-0.5 text-center">
        <span
          className="text-[11px] font-medium"
          style={{ letterSpacing: '0.01em' }}
        >
          {title1}
        </span>
        {title2 && (
          <span
            className="text-[10px] font-light tracking-wide text-gray-800"
            style={{ lineHeight: '1.1' }}
          >
            {title2}
          </span>
        )}
      </div>
      <div
        className={`mt-1 flex w-full items-center justify-center text-center text-base font-black text-gray-700 drop-shadow-sm`}
        style={{ letterSpacing: '0.02em', lineHeight: 1.1 }}
      >
        {value}
      </div>
    </div>
  )
  const wrap = asLink && id ? <a href={`#${id}`}>{content}</a> : content
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>{wrap}</TooltipTrigger>
        <TooltipContent>{tooltip}</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}
